import { Vue } from 'vue-facing-decorator';
import type { RuleObject, Rule as ValidationRule } from 'ant-design-vue/lib/form/interface';
import { ref, computed, unref, Ref, ComputedRef } from 'vue';
import { useI18n } from '@/hooks/web/useI18n';
import { LoginStateEnum } from '@2/typings/form.d';
import { FormInstance } from 'ant-design-vue/lib/form/Form';

/**
 * @program: microservice-central-portal
 * @description: 抽象的用户登录表单
 * @author: baiHoo.chen
 * @create: 2022年5月26日
 **/
export abstract class LoginFormAbs extends Vue {
  t = useI18n().t;
  // 表单引用
  formRef!: Ref<FormInstance>;
  formRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => {
    return this.getFormRules();
  });
  // 表单数据
  abstract formData: Recordable;
  // 是否显示
  abstract showed: ComputedRef<boolean>;
  /**
   * 获取登录状态
   */
  getLoginState(): ComputedRef<LoginStateEnum> {
    return computed(() => currentState.value);
  }
  /**
   * 设置登录状态
   * @param value
   */
  setLoginState(value: LoginStateEnum) {
    currentState.value = value;
  }
  /**
   * 表单校验
   * @param formRef
   */
  async validForm<T extends Object = any>(formRef: Ref<FormInstance>) {
    const form = unref(formRef);
    if (!form) return;
    const data = await form.validate();
    return data as T;
  }
  /**
   * 获取表单规则
   * @private
   */
  private getFormRules(): { [k: string]: ValidationRule | ValidationRule[] } {
    const createRule = (message: string): ValidationRule[] => {
      return [{ required: true, message, trigger: 'change' }];
    };
    const validateConfirmPassword = (password: string) => {
      return async (_: RuleObject, value: string) => {
        if (!value) {
          return Promise.reject(this.t('sys.login.passwordPlaceholder'));
        }
        if (value !== password) {
          return Promise.reject(this.t('sys.login.diffPwd'));
        }
        return Promise.resolve();
      };
    };
    const validatePolicy = async (_: RuleObject, value: boolean) => {
      return !value ? Promise.reject(this.t('sys.login.policyPlaceholder')) : Promise.resolve();
    };
    const accountFormRule = createRule(this.t('sys.login.accountPlaceholder'));
    const passwordFormRule = createRule(this.t('sys.login.passwordPlaceholder'));
    const smsFormRule = createRule(this.t('sys.login.smsPlaceholder'));
    const mobileFormRule = createRule(this.t('sys.login.mobilePlaceholder'));

    const mobileRule = {
      sms: smsFormRule,
      mobile: mobileFormRule,
    };
    switch (unref(currentState)) {
      // 注册表单规则
      case LoginStateEnum.REGISTER:
        return {
          username: accountFormRule,
          password: passwordFormRule,
          confirmPassword: [
            { validator: validateConfirmPassword(this.formData?.password), trigger: 'change' },
          ],
          policy: [{ validator: validatePolicy, trigger: 'change' }],
          ...mobileRule,
        };
      // 重置密码表单规则
      case LoginStateEnum.RESET_PASSWORD:
        return {
          username: accountFormRule,
          ...mobileRule,
        };
      // 手机表单规则
      case LoginStateEnum.MOBILE:
        return mobileRule;
      // 登录表单规则
      default:
        return {
          username: accountFormRule,
          password: passwordFormRule,
          captcha: smsFormRule,
        };
    }
  }
  /**
   * 处理用户登录
   */
  abstract handleLogin(): void;
}
export const currentState = ref(LoginStateEnum.LOGIN);
